<template>
  <div
    ref="customForm"
    class="custom-van-checkbox custom-form-container"
  >
    <FieldLabel
      :error-message="errorMessage"
      :required="required"
      :label="label"
    >
      <van-checkbox-group
        v-model="inputValue"
        :max="maxCount"
        @change="handleChange"
      >
        <van-cell-group>
          <div
            v-for="(o, index) in option"
            :key="index"
            class="cell-group-item"
          >
            <CustomVanCell
              :key="o.field_label"
              :can-do="canDo"
              @click="handleChange(o.field_value)"
            >
              <van-checkbox
                :name="o.field_value"
                :disabled="canDo"
              >
                <span class="van_cell_field_label">{{ o.field_label }}</span>
                <template #icon="props">
                  <img
                    class="img-icon"
                    :src="props.checked ? (canDo ? activeIcon1 : activeIcon) : inactiveIcon"
                  >
                </template>
              </van-checkbox>
            </CustomVanCell>
            <template
              v-if="o.has_fill"
            >
              <collapse>
                <div
                  v-show="inputValue.indexOf(o.field_value) > -1"
                  class="cell-group-input"
                >
                  <CustomVanInput
                    :ref="`vanSelectInput${index}`"
                    v-model="o.fill_value"
                    v-bind="o.prop"
                    :is-error-message="false"
                  />
                  <span
                    v-if="o.prop.required"
                    class="tips"
                  >*</span>
                </div>
              </collapse>
            </template>
          </div>
        </van-cell-group>
      </van-checkbox-group>
    </FieldLabel>
  </div>
</template>

<script>
import field from '../mixins/field'
import choice from '../mixins/choice'
import checkbox from '../mixins/checkbox'
import rule from '../mixins/rule'
import model from '../mixins/model'
import collect from '../mixins/collect/checkbox'
import disabled from '../mixins/setting/disabled'

export default {
  name: 'CustomVanCheckBox',

  mixins: [field, model('change', []), rule, collect, checkbox, choice, disabled],

  data () {
    return {
      activeIcon: require('./images/activeIcon.png'),
      activeIcon1: require('./images/activeIcon1.png'),
      inactiveIcon: require('./images/inactiveIcon.png'),
    }
  },
}
</script>

<style lang="scss" scoped>
.img-icon {
  width: 20px;
  height: 20px;
}
</style>

<style lang="scss">
.cell-group-input {
  display: flex;
  .custom-van-input {
    flex: 1;
  }
  .tips {
    width: 1em;
    font-weight: bold;
    color: #f40;
    text-align: right;
  }
}
</style>
